<template>
    <div class="body">
        <el-container class="home-container">
            <!-- 顶部栏 -->
            <el-header>
                <div>
                    <img class="logo" src="../assets/logo.png" @click="GoMainPage">
                    <span class="set">boke</span>

                    <!-- 搜索栏-->
                    <!-- <el-input class="sousuo" placeholder="搜点什么吧">

                    </el-input>
                    <span style="padding-bottom: 10px"><el-button class="el-button" type="primary"
                            icon="el-icon-search">搜索</el-button></span> -->


                </div>
            </el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="200px">
                    <el-menu text-color="white" active-text-color="cornflowerblue" :router="true">
                        <el-menu-item index="PersonalCenter">
                            <i class="el-icon-menu"></i>
                            <span slot="title">个人中心</span>
                        </el-menu-item>
                        <el-menu-item index="MySubscribtion">
                            <i class="el-icon-document"></i>
                            <span slot="title">我的订阅</span>
                        </el-menu-item>
                        <el-menu-item index="MyCollection">
                            <i class="el-icon-star-off"></i>
                            <span slot="title">我的收藏</span>
                        </el-menu-item>
                        <el-menu-item v-if="wo == bieren" index="MyFollowing">
                            <i class="el-icon-user"></i>
                            <span slot="title">我的关注</span>
                        </el-menu-item>
                        <el-menu-item index="MyArticle">
                            <i class="el-icon-document-copy"></i>
                            <span slot="title">我的博客</span>
                        </el-menu-item>
                        <el-menu-item v-if="wo == bieren" index="MyNotice">
                            <i class="el-icon-chat-round"></i>
                            <span slot="title">我的通知</span>
                        </el-menu-item>
                        <el-menu-item v-if="wo == bieren" index="MyMessage">
                            <i class="el-icon-edit"></i>
                            <span slot="title">我的消息</span>
                        </el-menu-item>
                        <el-menu-item v-if="wo == bieren" index="Setting">
                            <i class="el-icon-setting"></i>
                            <span slot="title">账号管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>

                </el-main>
            </el-container>
        </el-container>
        <div class="stars" ref="starsRef">
            <div class="star" v-for="(item, index) in starsCount" :key="index"></div>

        </div>
    </div>

</template>

<script>
import router from "@/router";
import { onMounted, ref } from "vue";

export default {
    name: 'home',// eslint-disable-line no-unused-vars
    data() {
        return {
            wo: localStorage.getItem('userId'),
            bieren: localStorage.getItem('userpageId')
        }

    },
    methods: {
        GoMainPage() {
            router.push('/');
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    //背景部分起
    setup() {
        let starsRef = ref(null);

        const starsCount = 1200; //星星数量
        const distance = 900; //间距



        onMounted(() => {
            let starNodes = Array.from(starsRef.value.children);
            starNodes.forEach((item) => {
                let speed = 0.2 + Math.random();
                let thisDistance = distance + Math.random() * 300;
                item.style.transformOrigin = `0 0 ${thisDistance}px`;
                item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`;
            });
        });
        return {
            starsRef,
            starsCount,
        };
    },
    //背景部分止

}
</script>

<style lang="less" scoped>
//菜单栏鼠标悬停颜色更改
.el-menu .el-menu-item:hover {
    background-color: rgba(153, 39, 171, 0.99);
    color: deeppink;
}

//icon图标

.el-icon-edit {
    color: white;
}

.el-icon-user {
    color: white;
}

.el-icon-chat-round {
    color: white;
}

.el-icon-star-off {
    color: white;
}

.el-icon-document {
    color: white;
}

.el-icon-document-copy {
    color: white;
}

.el-icon-menu {
    color: white;
}

.el-icon-s-marketing {
    color: white;
}

.el-icon-setting {
    color: white;
}

//左侧菜单
.el-menu {
    background-color: rgba(0, 0, 1, 0);
}

//搜索栏
.el-button {
    height: 4%;
    width: 5%;
    margin-left: 1150px;
    padding-bottom: 5px;
    align: center;



}

.sousuo {
    position: absolute;
    height: 6%;
    width: 50%;
    margin-left: 300px;
    padding-top: 9px;
}

.home-container {
    height: 100%;
}

/*顶部栏调整*/
.el-header {
    position: static;
    color: #ffffff;
    border: 1px solid #ffffff;
    font-size: 20px;


}

span.set {

    margin-left: 15px;

}

/*侧边调整*/
.el-aside {
    color: #ffffff;
    padding-top: 5px;
    border: 1px solid #ffffff;
}

/*主内容调整*/
.el-main {
    color: #ffffff;
    border: 1px solid #ffffff;
}

/*图标调整*/
.logo {


    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform: translate(0, 20%);

}

/*背景部分起 */
.body {
    position: absolute;
    width: 100%;
    height: 100%;
    z-Index: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    background: radial-gradient(200% 100% at bottom center,
            #f7f7b6,
            #e96f92,
            #1b2947);
    background-attachment: fixed;
    overflow: hidden;
}

@keyframes rotate {
    0% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
    }

    100% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
    }
}

.stars {
    transform: perspective(500px);
    transform-style: preserve-3d;
    position: relative;
    perspective-origin: 50% 100%;
    left: 45%;
    animation: rotate 90s infinite linear;
    bottom: 0;
    z-index: -1;
}

.star {
    width: 2px;
    height: 2px;
    background: #f7f7b6;
    position: relative;
    left: 0;
    top: 0;
    backface-visibility: hidden;
    z-index: -1;
}

/*背景部分终*/
</style>
